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CAPITULO 1 

Introdugao a JavaScript 


Neste capitulo, sera apresentada a linguagem JavaScript, relatando-se suas origens, 
finalidades e destinagao. Sera feito um breve relato historico de sua evolugao, exa- 
minando as diferentes versoes por que passou e desmistificando alguns conceitos 
malformados que acabaram por estigmatizar a linguagem como uma tecnica inferior 
e em desacordo com as boas praticas de programagao para web. 

Com a finalidade de criar uma base de estudos para os topicos e capitulos que 
se seguem, serao apresentados os metodos para criar caixas de alerta, escrever e 
atrelar um evento na marcagao HTML. 

Estudaremos, ainda, os conceitos basicos de objetos da linguagem JavaScript e 
aprofundaremos o estudo de variaveis mostrando como, onde e quando as declarar. 

Ao final do estudo deste capitulo, o leitor tera uma solida visao dos principios 
e da filosofia de emprego de programagao JavaScript em conformidade com os 
Padroes Web, bem como adquirido os conhecimentos necessarios para criar caixas 
de alerta, escrever HTML com o uso de JavaScript e atrelar, ainda que em carater 
precario, um evento a um botao HTML. Esses conhecimentos auxiliarao o leitor a 
criar visualizagao para os resultados de seus primeiros scripts. 


1.1 Visao geral 

A linguagem de marcagao HTML destina-se a estruturar uma pagina web, nao se 
devendo emprega-la para adicionar estilos ou apresentagao visual aos elementos 
que constituem a pagina, sendo tais tarefas fungao das folhas de estilo em cascata. 
A HTML, em sua versao atual _ HTML 4.01 _, tambem nao possui funcionalidades 
que permitam adicionar interatividade avangada a pagina, sendo tal tarefa fungao 
das linguagens de programagao. 
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JavaScript foi criada pela Netscape em parceria com a Sun Microsystems, com a fina- 
lidade de fornecer um meio de adicionar interatividade a uma pagina web. A primeira 
versao, denominada JavaScript 1.0, foi langada em 1995 e implementada em margo de 1996 
no navegador Netscape Navigator 2.0 quando o mercado era dominado pela Netscape. 

Logo a seguir, veio a epoca da chamada guerra dos browsers, cujos efeitos nocivos 
se fazem sentir ate os dias atuais. Para nao fugir a regra, a Microsoft, em resposta a 
Netscape, criou a linguagem JScript baseada em Visual Basic cuja primeira versao 
denominada JScript 1.0 foi langada com o navegador Internet Explorer 3.0. 

Nao ha como fazer funcionar um formulario HTML com o uso de elementos HTML. 
A HTML limita-se a criar os rotulos e campos de um formulario para serem preen- 
chidos pelo usuario e nada mais. Com HTML, nao conseguimos processar os dados 
nem mesmo envia-los ao servidor ou a outra maquina qualquer. Para cumprir essas 
tarefas, e necessario utilizar um programa que consiga manipular e processar os dados. 
Entre as varias linguagens de programagao destinadas a adicionar e processar dados 
em paginas web, destacam-se PHP, ASP, Java, Ruby Phyton e ColdFusion, entre outras. 

As linguagens de programagao como as citadas anteriormente foram desenvolvidas 
para rodar no lado do servidor, isto e, dependem de uma maquina remota onde estao 
hospedadas as funcionalidades capazes de interpretar e fazer funcionar os programas. 

JavaScript e uma linguagem desenvolvida para rodar no lado do cliente, isto e, 
a interpretagao e o funcionamento da linguagem dependem de funcionalidades 
hospedadas no navegador do usuario. Isso e possfvel porque existe um interpretador 
JavaScript hospedado no navegador. 

Tanto a Netscape como a Microsoft desenvolveram interpretadores JavaScript 
para serem hospedados no servidor, tornando possfvel rodar JavaScript no lado do 
servidor. Esses interpretadores foram disponibilizados para uso publico e podem 
ser usados pelos desenvolvedores para serem embutidos em aplicagoes gerais. A 
organizagao Mozilla langou, sob a bandeira de codigo aberto e livre, duas versoes 
do interpretador: Spider Monkey escrita em C e Rhino escrita em Java. 



Neste livro, trataremos exdusivamente de JavaScript para rodar no lado do cliente. 
Assim sendo, fica subentendido que daqui para frente a palavra JavaScript se refere 
a JavaScript a ser interpretada pelo navegador. 


Em tese, precisamos apenas de um navegador para fazer funcionar scripts desen- 
volvidos com a linguagem JavaScript. Ao contrario, programas escritos em PHP, por 
exemplo, precisam ser hospedados em um servidor remoto configurado para rodar 
PHP ou visualizados localmente em uma maquina na qual tenha sido instalado um 
servidor local com suporte para PHP. 
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1.2 Funcionalidades gerais da JavaScript 

1.2.1 Manipular conteudo e apresenta^ao 

Com JavaScript, podemos escrever marcagao HTMLe inseri-la na marcagao de um 
documento existente. Por exemplo: insergao de data/hora no documento, insergao 
de uma mensagem de boas-vindas ou, ainda, insergao de conteudos diferenciados 
e escolhidos de acordo com o navegador do usuario. Podemos, ate mesmo, gerar o 
HTML complete de uma pagina web. 

Na verdade, esse poder da JavaScript em gerar marcagao HTML foi um dos fatores 
responsaveis pela ma fama da linguagem. Desenvolvedores, maravilhados com as 
possibilidades dessa linguagem, comegaram a gerar, indiscriminadamente, HTML, 
tornando os conteudos completamente inacessiveis. Antigamente, tal pratica era co¬ 
mum, aceitavel e amplamente empregada, porem com a chegada dos Padroes Web, 
nao e admissivel gerar indiscriminadamente HTML com JavaScript. E preciso uma 
analise criteriosa para determinar que HTMLpode ou nao ser gerado com JavaScript. 

Usar JavaScript em conformidade com os Padroes Web implica, entre outras praticas, 
que, na ausencia de um interpretador JavaScript, nao se comprometa o acesso ao 
conteudo. 

Como regra geral, evite gerar marcagao HTML com JavaScript. Ao longo deste 
livro, sempre que for o caso, ressaltaremos as excegoes a essa recomendagao. 

JavaScript e capaz de definir, alterar e controlar de forma dinamica a apresenta- 
gao de um documento HTML, como os aspectos relacionados a cor de fundo, de 
textos e de links, ou mesmo interferir no posicionamento dos elementos HTML de 
um documento. E possivel manipular a folha de estilos associada ao documento 
criando novas regras CSS ou anulando regras existentes. 


1.2.2 Manipular o navegador 

Com JavaScript, podemos controlar o comportamento do navegador em diversos 
aspectos, como criar janelas pop-up, apresentar mensagens ao usuario, alterar as di- 
mensoes do navegador, interferir na barra de status, retirar menus, fechar e abrir janelas. 

E muito provavel que voce ja tenha passado pela desagradavel experiencia de 
entrar em um site e, surpreendentemente, constatar que toda a parte superior do 
navegador simplesmente desapareceu, impedindo-o de fechar a janela. Ou, ainda, 
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a cada clique em um link, ver abrir uma janela pop-up com propaganda de um 
produto que em nada se relaciona a seus desejos consumistas, ou, ao sair de um 
site ou fechar uma janela, descobrir uma outra janela nao solicitada. 

Esses comportamentos, inesperados e nao solicitados pelo usuario, inseridos 
por JavaScript tambem contribuiram para a ma fama da linguagem. Portanto, 
nao perpetue essa pratica nociva e ultrapassada, desenvolvendo seus scripts em 
conformidade com os Padroes Web e voltando-se exclusivamente para enriquecer 
a experiencia do usuario sem criar barreiras para a acessibilidade e a usabilidade. 

Adote como regra geral nao manipular a janela do navegador do usuario, pois e 
ele quern decide se quer abrir, fechar, redimensionar, voltar, sair e fazer o que bem 
entender com o navegador. 


1.2.3 Interagircomformularios 

JavaScript e capaz de acessar os campos e valores digitados em um formulario 
HTML e proceder a validagao dos dados, realizar calculos e fornecer dicas de pre- 
enchimento dos campos. 


1.2.4 Interagir com outras linguagens dinamicas 

JavaScript pode ser usada em conjunto com outras linguagens para cumprir tarefas 
complementares relacionadas ao fluxo da programagao. 


1.3 JavaScript em conformidade com os Padroes Web 

O conceito de desenvolvimento em conformidade com os Padroes Web trouxe como 
consequencia imediata para a linguagem JavaScript a necessidade de se rever os 
seus criterios de uso. Dai surgiram dois principios basicos que norteiam seu uso: o 
principio de Javascript nao obstrutivo e o da melhoria progressiva. 

Nao ha uma clara divisao entre eles, na verdade se completam e sao interde- 
pendentes. 

Escrever JavaScript nao obstrutivo implica: 

■ que o conteudo da pagina deve estar presente e funcional, ainda que se per- 
ca em usabilidade, caso o usuario esteja visualizando o documento em um 
dispositivo (por exemplo, navegador) sem suporte para JavaScript; 
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■ usar a linguagem com vistas a unicamente incrementar a usabilidade da 
pagina; 

■ escrever scripts em arquivos externos para serem linkados ao documento e 
nao inserir script na marcagao HTML. 

O primeiro conceito traz a grande novidade e separa definitivamente os principios 
de uso da JavaScript a maneira ultrapassada e a maneira moderna, em conformidade 
com os Padroes Web. 

Ate o advento dos Padroes Web, a premissa em vigor era a de que JavaScript e 
acessibilidade eram incompativeis. Nao havia como se pensar em desenvolvimento 
JavaScript contemplando a acessibilidade. Se desabilitarmos JavaScript em nosso 
navegador e passarmos algum tempo navegando por sites na Web, certamente 
teremos uma boa ideia da incompatibilidade de JavaScript mal desenvolvido com 
acessibilidade. Assim, nao e exagero afirmar que o primeiro conceito da listagem 
anterior revolucionou a forma de escrever JavaScript. 

O segundo conceito agrega um valor eminentemente pratico a linguagem, acaban- 
do definitivamente com a pratica de criar scripts voltados unicamente a acrescentar 
efeitos espetaculares na pagina, mas sem qualquer utilidade, como figuras acom- 
panhando o cursor, objetos voando pela pagina, luzes piscando e uma parafernalia 
de efeitos tao proprios do desenvolvimento em anos passados. 

O terceiro conceito alinha-se com o moderno conceito de separagao de camadas 
de desenvolvimento. JavaScript deve ser mantido na camada de comportamento, 
nao invadindo a camada de estruturagao do conteudo (marcagao HTML) nem a 
camada de apresentagao (CSS). 


1.4 Camadas de desenvolvimento 

Com a chegada dos Padroes Web, o conceito de desenvolvimento em camadas 
tornou-se um importante ponto a ser considerado na construgao de aplicagoes Web. 

Tal conceito preconiza a separagao dos codigos de desenvolvimento em tres ca¬ 
madas separadas: a camada de estruturagao de conteudos constituida pela marcagao 
HTML, a camada de apresentagao constituida pelas folhas de estilos e a camada de 
comportamento constituida pelos scripts que determinam comportamentos como 
scripts desenvolvidos com JavaScript. 

Desenvolver segundo o principio da separagao das camadas de desenvolvimento 
implica escrever os codigos especificos de cada camada em arquivos separados e 
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estabelecer a conexao entre eles com o uso de links. As principals vantagens de 
adotar a pratica de separagao das camadas sao: 

■ elimina a necessidade de repetigao de codigos em diferentes paginas; 

■ facilita o reaproveitamento de trechos de codigos em outros projetos; 

■ facilita a busca e corregao de eventuais bugs nos codigos; 

■ facilita a manutengao e o entendimento dos codigos. 

Outro conceito intimamente relacionado ao principio de separagao das camadas 
de desenvolvimento e o moderno conceito, introduzido com a chegada dos Padroes 
Web, conhecido como “melhoria progressiva” (progressive enhancement). Segundo 
esse principio, o desenvolvimento de uma pagina Web deve ser feito em tres etapas: 

■ Na primeira etapa, estruturar os conteudos usando a linguagem HTML. Ao 
final dessa etapa, todos os conteudos devem estar disponiveis para qualquer 
visitante que esteja utilizando qualquer dispositivo de usuario. 

■ Na segunda etapa, incrementar a apresentagao da pagina com o uso das CSS. 
Essa etapa visa a melhorar a experiencia dos usuarios aptos a visualizar folhas 
de estilos. 

■ Finalmente, na terceira etapa, introduzir JavaScript com a finalidade de acres- 
centar interatividade a pagina, melhorando ainda mais a experiencia do usuario. 


1.5 Introdu^ao a linguagem 

A linguagem JavaScript foi inventada por Brendan Eich, da Netscape, e a primei¬ 
ra versao da linguagem denominada JavaScript 1.0 foi introduzida no navegador 
Netscape 2.0 em 1996. Nesse mesmo ano, a Microsoft langou sua versao com o 
nome JScript 1.0 e introduziu-a no entao Internet Explorer 3.0. Aquela epoca, em 
plena guerra dos navegadores, as diferentes implementagoes das funcionalidades da 
linguagem nos dois navegadores nao seguiam um padrao unificado, causando um 
verdadeiro martirio para o desenvolvedor implantar scripts para servir ambos os 
navegadores. Nao iremos entrar em detalhes historicos com relagao as implemen¬ 
tagoes proprietarias, mas convem ressaltar que ate os dias atuais ainda sentimos os 
efeitos nefastos daquela era, conforme veremos no decorrer dos capitulos deste livro. 

Atualmente, o nome oficial da JavaScript e ECMAScript e a versao da linguagem 
e a ECMA-262 v5. Na tabela 1.1, ha um resumo da evolugao da JavaScript em suas 
diferentes versoes e implementagoes. 
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Tabela 1.1 - Versdes da JavaScript 


Versao 

Implementacao 

Mes/ano 

JavaScript 1.0 

Netscape 2.0 

Marijo 1996 

JavaScript 1.1 

Netscape 3.0 

Agosto 1996 

JavaScript 1.2 

Netscape 4.0 e 4.05 

Junho1997 

JavaScript 1.3 

Netscape 4.06 e 4.07x 

Outubro 1998 

JavaScript 1.4 

Servidores Netscape 


JavaScript 1.5 

Netscape 6.0 - Firefox 1.0 - Opera 6.0 a 9.0 

Novembro 2000 

JavaScript 1.6 

Firefox 1.5 - Safari 3.0 e 3.1 

Novembro 2005 

JavaScript 1.7 

Firefox 2.0 - Safari 3.2 e 4.0 - Chrome 1.0 

Outubro 2006 

JavaScript 1.8 

Firefox 3.0 

Junho 2008 

JavaScript 1.8.1 

Firefox 3.5 

2008 

JavaScript 1.9 

Firefox 4.0 

2009 

JavaScript 1.0 

Internet Explorer 3 

Agosto 1996 

JavaScript 2.0 

Internet Explorer 3 - Windows IIS 3 

Janeiro 1997 

JavaScript 3.0 

Internet Explorer 4 

Outubro 1997 

JavaScript 4.0 

Visual Studio 6.0 


JavaScript 5.0 

Internet Explorer 5 

Marijo 1999 

JavaScript 5.1 

Internet Explorer 5.01 


JavaScript 5.5 

Internet Explorer 5.5 

Julho 2000 

JavaScript 5.6 

Internet Explorer 6 

Outubro 2001 

JavaScript 5.7 

Internet Explorer 7 

Novembro 2006 

JavaScript 5.8 

Internet Explorer 8 

Mar$o 2009 

ECMA-262 vl 

Navegadores versao 4 

1998 

ECMA-262 v2 

Versao de testes 

1998 

ECMA-262 v3 

Navegadores versao 6 

1999 

ECMA-262 v4 

Navegadores versao 6+ 

2002 

ECMA-262 v5 

Versao atual 

2009 


1.5.1 Definigoes 

ECMA 

Abreviatura para European Computer Manufacturers Association, trata-se de uma 
associagao fundada em 1961 dedicada a padronizagao de sistemas de informagao. 
Desde 1994, passou a se denominar ECMA International para refletir suas atividades 
internacionais. A associagao e aberta a companhias que produzem, comercializam 
ou desenvolvem sistemas de computagao ou de comunicagao na Europa. Em 1996, a 
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ECMA Internacional comegou a desenvolver a ECMA-262 que vem a ser a norma para 
JavaScript. Em 1997, foi langada a primeira edigao da norma e, em 1998, a norma foi 
reconhecida oficialmente pela International Organization for Standardization (ISO). 

ECMAScript 

E uma linguagem de programagao orientada a objetos que se destina a realizar 
calculos e manipular objetos computacionais de um ambiente de hospedagem. 
ECMAScript nao se destina a ser computacionalmente autossuficiente, visto que 
nao existem disposigoes nas especifrcagoes que normatizem entrada de dados ex- 
ternos ou saida de resultados calculados. Em vez disso, espera-se que o ambiente 
computacional de um programa ECMAScript proporcione nao apenas os objetos e 
outras funcionalidades descritas nas especifrcagoes, mas tambem objetos especificos 
a um ambiente de hospedagem, cuja descrigao e cujo comportamento estao alem 
do escopo da especificagao. 

Linguagem de script 

E uma linguagem de programagao usada para manipular, personalizar e automatizar 
as funcionalidades de um sistema existente. Em tais sistemas, as funcionalidades ja 
se encontram disponfveis por meio de uma interface de usuario e a linguagem de 
script prove um mecanismo para acessa-las. Dessa forma, o sistema existente oferece 
um ambiente de hospedagem para objetos e funcionalidades que complementa os 
recursos da linguagem de script. A linguagem de script destina-se a programadores 
profissionais e nao profissionais. 

Ambiente de hospedagem 

Um navegador web e um exemplo de ambiente de hospedagem para ECMAScript 
que funciona no lado do cliente. Ele hospeda objetos que representam janelas, me¬ 
nus pop-ups, caixas de dialogo, areas de texto, ancoras, quadras, historico e cookies. 
Alem disso, o ambiente fornece funcionalidades para que o script manipule eventos 
como mudanga de foco, carregamento e fechamento de documentos, erros, selegao, 
apresentagao de formularios e variadas agoes do mouse. 

Um servidor web e outro exemplo de ambiente de hospedagem para ECMAScript 
que funciona no lado do servidor. Hospeda objetos que representam as requisigoes 
ao servidor, clientes, arquivos e mecanismos de bloqueio e compartilhamento de 
dados. Ao desenvolver scripts, em conjunto, no lado do cliente e no lado do servidor, 
e possfvel estabelecer interagao entre o cliente e o servidor, proporcionando uma 
interface de usuario personalizada para um aplicativo baseado na web. 
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Cada navegador ou servidor que suporta ECMAScript fornece seu ambiente 
proprio de hospedagem que completa o ambiente de execugao ECMAScript. 


1.6 Criando uma base para estudos 

Antes de prosseguirmos com a apresentagao dos fundamentos da linguagem, vamos 
apresentar alguns conceitos e funcionalidades da JavaScript que servirao de base 
para desenvolver nossos estudos e exemplos praticos disponiveis no site do livro. 

O que iremos estudar a seguir sao temas basicos da JavaScript e se o leitor ja 
tern alguma intimidade com essa linguagem, sinta-se a vontade para ler o capitulo 
seguinte. Contudo, convido-o a ler o que se segue com o proposito de fazer uma 
revisao de conceitos. 


1.6.1 Orienta^ao a objetos 

A linguagem JavaScript suporta program agao orientada a objetos - Object-Oriented 
Programming (OOP). E mais apropriado dizer que JavaScript e uma linguagem capaz 
de simular muitos dos fundamentos de OOP, embora nao plenamente alinhada com 
todos os conceitos de orientagao a objetos. Veremos a seguir os fundamentos da 
OOP para JavaScript, sem, contudo, entrar em consideragoes ou diferenciagoes com 
OOP para outras linguagens de programagao, pois este nao e o escopo deste livro. 

OOP e um paradigma (estilo) de programagao que usa analogia com objetos do 
mundo real e suas caracteristicas para definir estruturas de dados agrupados em 
campos ou metodos, bem como a interagao entre esses dados, com a finalidade de 
desenvolver aplicagoes e escrever programas de computador. 

A melhor maneira de entender o paradigma da programagao OOP e mostrar 
a analogia com objetos do mundo real. Para nosso exemplo, vamos considerar o 
objeto: pessoa. 

Objetos possuem propriedades e metodos. 

Propriedades sao valores associados ao objeto. Algumas propriedades do nosso 
objeto pessoa sao altura, peso, sexo, cor da pele, naturalidade, profissao etc. 

Metodos (ou fungoes) sao agoes que podem ser executadas pelo objeto. Alguns 
metodos do objeto pessoa sao andar(), dormirQ, comer(), trabalharQ, divertir() etc. 
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Para acessar as propriedades de um objeto, usamos a sintaxe mostrada a seguir: 
altura = Pessoa.altura; 
sexo = Pessoa.sexo; 
profissao = Pessoa.profissao; 


Para acessar os metodos de um objeto, a sintaxe e conforme mostrada a seguir: 
Pessoa.andarO; 

Pessoa.dormirO; 

Pessoa.trabalharO; 


Os objetos da linguagem JavaScript podem ser agrupados em tres categorias 
distintas: 


■ objetos internos da linguagem, como, strings, arrays e datas; 

■ objetos do ambiente de hospedagem (por exemplo, o navegador), como, window 
e document; 

■ objetos personalizados criados pelo desenvolvedor. 

Programagao orientada a objetos e consequente criagao de objetos nao sao o foco 
deste livro, contudo abordaremos esse assunto com maiores detalhes nos capitulos 
subsequentes, quando for necessario. 


No momento, e suficiente que se entenda que objetos possuem propriedades e 
metodos acessados com o uso de sintaxe apropriada e saber tambem que a lingua¬ 
gem JavaScript possui objetos nativos com suas propriedades e metodos. 



E de boa pratica escrever o nome de objetos comegando com letra maiuscula para 
diferencia-los de outros tipos de dados da linguagem, como das variaveis. Isso permite 
localizar, com maior facilidade, objetos no script, facilitando a manutengao do codigo. 


1.6.2 Caixas de dialogo 

Caixa de dialogo e uma janela do tipo pop-up que se destina a fornecer informagoes 
ou coletar dados do usuario. 

A linguagem JavaScript possui tres metodos (ou fungoes), para o objeto Window, 
destinadas a criar tres tipos de caixa de dialogo. 
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Vamos apresentar esses metodos, examinando como criar cada uma dessas caixas 
de dialogo que servirao de apoio para demonstrar o funcionamento dos exemplos 
que iremos desenvolver nos primeiros capitulos do livro. 

Caixa de alerta 

Alert Box, ou caixa de alerta, destina-se a colocar na interface do usuario uma 
caixa de dialogo contendo uma mensagem a ele. Conforme vimos anteriormente, a 
sintaxe para se chamar um metodo de um objeto JavaScript consiste em escrever o 
objeto e o metodo separados por um ponto. Quando se trata de uma propriedade 
ou metodo do objeto Window, podemos abreviar a sintaxe omitindo o objeto. Isso 
porque Window e o objeto JavaScript global ou raiz que content todos os demais 
objetos do navegador. A seguir, veja a sintaxe para criar uma caixa de alerta: 
window.alert("arg"); 

ou simplesmente: 
alert("arg"); 

Esse metodo ou fungao admite um argumento - arg - que e uma string contendo 
a mensagem a ser apresentada ao usuario. 

Observe o codigo mostrado a seguir: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit!onal//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
chtml xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> 

<head> 

<title>Livro JavaScript do Maujor</title> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-l" /> 

<script type="text/javascript"> 
alert("Alo Mundo!"); 

</script> 

</head> 

<body> 

</body> 

</html> 

[cl-alertbox.html] 

Na figura 1.1, observe a caixa de alerta renderizada em diferentes navegadores. 

As caixas de dialogo criadas com JavaScript tern sua apresentagao determinada 
pelo fabricante do navegador, conforme podemos observar na figura 1.1. 


Capi'tulo 1 ■ Introdu^ao a JavaScript 


33 



Firefbx 



http://livrojavascript.localhost 
Alo Mundo! 


Safari 



Internet Explorer 


Figura 1.1 -Alert Box 



Opera 

em diferentes navegadores. 


Note no script anterior que para inserir JavaScript diretamente em uma pagina 
HTML usamos o elemento script e seu atributo type. A sintaxe para o elemento 
script preve uma tag de abertura <script> e uma tag de fechamento </script> dentro 
das quais devera ser inserido o codigo JavaScript. 

Encontramos muitos codigos fazendo uso do atributo 1 anguage para o elemento 
script como mostrado a seguir: 

<script 1anguage="javascriptl.2"> 


Esse atributo visa a identificar a linguagem em que foi escrito o script. Contudo, 
por nao haver uma normatizagao dos identificadores de linguagens, o atributo esta 
em desuso segundo as recomendagoes do W3C e nao devera ser empregado. Use o 
atributo type como mostrado anteriormente. 



Nos rascunhos de trabalho para a especificagao da HTML 5 esta previsto o uso do 
elemento script sem necessidade de atributos. 


O script mostrado anteriormente consta de uma linha contendo um metodo 
(ou fungao) nativo da linguagem JavaScript e pertencente ao objeto Window, de- 
nominado alertO, que admite uma string como parametro. A string e o texto a ser 
apresentado na caixa de alerta e devera ser escrita entre aspas duplas ("") ou aspas 
simples (''). A linha de declaragao da fungao termina com ponto-e-virgula. 
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Abra o arquivo [cl-alertbox.html], substitua a string por outra qualquer e veja o 
efeito no navegador. 

Note que inserimos nosso script para a caixa de alerta na segao head do documen- 
to. Se retirarmos o script dessa segao e o inserirmos na segao body, ira funcionar nor- 
malmente. Experimente fazer isso alterando o arquivo e visualizando no navegador. 

Mas, de acordo com o que vimos anteriormente, misturar scripts com a marcagao 
HTML contraria os Padroes Web, ferindo os conceitos de JavaScript nao obstrutivo 
e de separagao das camadas de desenvolvimento. Assim, o script inserido na segao 
body nao e apropriado e deve ser evitado. 

Para a visualizagao imediata do funcionamento dos nossos scripts, iremos ado- 
tar inicialmente a pratica de inseri-los diretamente na marcagao HTML. Tao logo 
tenhamos passado uma base solida que permita entender os principios de funcio¬ 
namento da linguagem, mostraremos a maneira correta de separar nossos scripts 
em um arquivo independente da marcagao. Mas, desde ja, esteja consciente de que 
script misturado com HTML nao e uma pratica recomendavel. 

Suponha que pretendemos apresentar ao usuario uma caixa de alerta com uma 
mensagem em duas linhas, como mostra a figura 1.2. 



I Alo Mundo! 




Figura 1.2 -Alert Box com mensagem em duas linhas. 

Talvez voce seja tentado a escrever o seguinte script: 

<head> 

<script type="text/javascript"> 

alert("Alo Mundo!<br />Cheguei.")l 
</script> 

</head> 


Isso nao vai funcionar, pois <br /> sera interpretado como uma string e nao como 
um elemento HTML. Experimente fazer isso e visualize no navegador. 
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Felizmente, para resolver esse e outros problemas de formatagao de strings, a lin- 
guagem JavaScript, tal como outras linguagens de programagao, aceita os chamados 
caracteres de controle ASCII. Um deles e \n, que causa uma quebra de linha na string. 

Assim, para pular uma linha na mensagem ao usuario passada com o uso de 
uma caixa de alerta, o codigo utilizado e o seguinte: 

<head> 

<script type="text/javascript"> 
al ert("Al6 Mundo!\nCheguei."); 

</script> 

</head> 


No item [1.8.5.] apresentamos uma tabela com os caracteres de controle ASCII 
para JavaScript. 

Caixa de dialogo de confirmagao 

O metodo confirm 0 do objeto Window destina-se a colocar na interface do usuario 
uma caixa de dialogo contendo dois botoes, normalmente denominados OK e Cancelar, 
e, ao clicar um deles, ele confirma ou cancela uma determinada agao. 

Observe o codigo mostrado a seguir: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> 

<head> 

<title>Livro JavaScript do Maujor</title> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-l" /> 

<script type="text/javascript"> 

confirm("Voce tem certeza que quer apagar o arquivo?\n 
Esta operagao nao podera ser desfeita."); 

</script> 

</head> 

<body> 

</body> 

</html> 

♦J [cl-confirm.html] 

Na figura 1.3, observe a renderizagao da caixa de dialogo do tipo confirm0 criada 
com o uso do script mostrado. 
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Voce tem certeza que quer apagar o arquivo? 
Esta operajao nao podera ser desfeita. 



] [ Cancelar | 


Figura 1.3 - Caixa de dialogo confirm. 


Em uma situagao real, o script mostrado deveria ser complementado, ficando 
em condigoes de receber a resposta do usuario e tomar uma decisao baseado na 
resposta. Apenas quando um dos botoes e clicado, a linguagem fornece mecanismos 
internos capazes de identificar o botao clicado e manipular a resposta. 

Caixa de dialogo para entrada de string 

O metodo promptO do objeto Window destinada-se a colocar na interface do usua¬ 
rio uma caixa de dialogo contendo um campo para que ele digite uma string. Essa 
fungao admite dois argumentos conforme mostrado a seguir: 
prompt ("argi", [" arg2"])\ 

Os argumentos devem estar entre aspas duplas ou simples e separados por 
virgula, sendo o segundo argumento facultativo. O primeiro argumento, argl, e 
uma instrugao ao usuario para o que se espera que ele digite no campo de texto 
e o segundo argumento, arg2, um valor default, facultativo, inserido no campo de 
texto, normalmente para fornecer uma dica da forma de preenchimento do campo. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
chtml xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> 

<head> 

<title>Livro JavaScript do Maujor</title> 

cmeta http-equiv="Content-Type" content="text/html; charset=iso-8859-l" /> 

<script type="text/javascript"> 

prompt("01a visitante\nInforme a data do seu nascimento.", "dd/mm/aaaa"); 
</script> 

</head> 

<body> 

</body> 

</html> 

x> [cl-prompt.html] 

Na figura 1.4, observe a renderizagao da caixa de dialogo do tipo promptO criada 
com o uso do script mostrado. 
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Figura 1.4 - Caixa de dialogo prompt. 

Em uma situagao real, o script mostrado deveria ser complementado, ficando em 
condigoes de receber a resposta do usuario e manipula-la. Apenas quando um dos 
botoes e clicado, a linguagem fornece mecanismos internos capazes de identificar 
a string entrada pelo usuario. 

1.6.3 Escrever HTML com JavaScript 

Vimos os tres metodos do objeto Window destinados a criar caixas de dialogo. 
Vamos examinar a seguir o metodo writeO do objeto Document cuja finalidade e 
escrever marcagao HTMLem um documento. Uma vez que Document e um objeto 
de Window, a sintaxe para esse metodo e mostrada a seguir: 

wi ndow.document.write("argl"); 

ou simplesmente: 

document.write("argl"); 

Esse metodo admite um argumento que e a marcagao HTML a ser inserida 
no documento. Ao contrario do metodo alertO, aceita como argumento marcagao 
HTML e nao somente strings. Assim, veja o script a seguir: 

document.write("<p>A16 mundocbr />Cheguei.</p>"); 

Causa a renderizagao de um paragrafo com uma quebra de linha. Esse metodo 
escreve diretamente na pagina, tal como se tivessemos inserido a marcagao no arqui- 
vo HTML. Cria conteudo completamente inacessivel para dispositivos nao visuais, 
como um leitor de tela. Por essa razao, de acordo com os Padroes Web, usar esse 
metodo em scripts requer uma analise acurada e deve se restringir a casos muito 
especificos. Como regra geral, evite utiliza-lo. 

Veja uma demonstragao pratica da inacessibilidade desse metodo. Considere o 
script a seguir: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
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chtml xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> 

<head> 

<title>Livro JavaScript do Maujor</title> 

cmeta http-equiv="Content-Type" content="text/html; charset=iso-8859-l" /> 

</head> 

<body> 

<script type="text/javascript"> 

document.write("<h2>0 metodo <code>write()</codex/h2>"); 

document.write("<p>0 metodo <code>write()</code> do objeto <code>document</code> 
destina-se a escrever marcaqao HTML com uso da JavaScript</p>"); 

</script> 

</body> 

</html> 

[cl-write.html] 

Na figura 1.5, veja a renderizagao da marcagao HTML criada com o script e 
mostrada em arquivo disponivel no site do livro. 



Arquivo Editor Exibir Historico Favoritos Ferramentas Ajuda 

| Capitulo 1 


document.writeO. 


0 metodo writef) 

O metodo write () do objeto document destina-se a escrever marcagao HTML com uso da 


Figura 1.5 - Metodo write (). 



0 metodo wri te 0 so funciona como mostrado no exemplo anterior, quando inserido 
no fluxo do documento que esta sendo processado. Se chamarmos esse metodo 
com o uso de link na segao head ou de urn evento como veremos a seguir, em urn 
documento ja carregado, ele ira sobrescrever todo o HTML carregado. 


O metodo writelnO e semelhante ao metodo writeO, com a diferenga que acres- 
centa um caractere de nova linha ao final do conteudo inserido. Em marcagao 
HTML, pular uma linha nao causa renderizagao em nova linha (sabemos que para 
pular uma linha, devemos usar o elemento br). Assim, o efeito pratico de writelnO 
e o mesmo de writeO. 
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Outra funcionalidade da linguagem que usaremos para servir de apoio aos exemplos 
diz respeito a eventos. Apresentaremos sumariamente o objeto evento mostrando 
os prindpios basicos do seu uso e, em capitulos posteriores, iremos aprofundar os 
conceitos. 

Genericamente falando, podemos dizer que eventos sao agoes capazes de dispa- 
rar uma reagao. Veja este exemplo: clicar um link ou colocar o ponteiro do mouse 
sobre um elemento sao eventos. Ao clicar um link, desencadeamos uma reagao que 
podera ser a de abrir uma nova pagina. Ao colocar o ponteiro do mouse sobre um 
elemento, podemos, por exemplo, alterar a opacidade dele. 

Eventos sao muito usados em JavaScript e viabilizam a interatividade em uma 
pagina Web. Na verdade, eventos viabilizam a propria existencia da JavaScript. Sem 
eles, nao teriamos como fazer funcionar os scripts. 

Neste capitulo, nao iremos aprofundar o estudo de eventos. Mostraremos ape- 
nas os eventos denominados onclick e onload que ocorrem respectivamente quando 
o usuario clica um elemento qualquer da pagina (nao necessariamente um link) e 
quando um documento e carregado. Eventos podem ser disparados pelo usuario, 
como e o caso de oncl i ck, ou ocorrer independentemente da interferencia do usuario, 
como e o caso de onload. 

Observe o script a seguir e, antes de visualizar o seu funcionamento no site do 
livro, tente entende-lo: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
chtml xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> 

<head> 

<title>Livro JavaScript do Maujor</title> 

cmeta http-equiv="Content-Type" content="text/html; charset=iso-8859-l" /> 

</head> 

<body> 

ebutton type="button" onclick="alert('Caixa de alerta');">Alert</button> 
ebutton type="button" onclick="confirm('Caixa de confirmagao');">Confirm</button> 
ebutton type="button" onclick="prompt('Caixa de dados');">Prompt</button> 

</body> 

</html 

O [cl-onclick.html] 
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Observe que atrelamos o evento onclick a tres botoes que, ao serem clicados, 
criarao, cada um deles, uma caixa de dialogo. Note que os eventos previstos na 
linguagem JavaScript sao atributos da HTML cujo valor determina a agao a ser 
disparada. Ao usarmos eventos como atributos de um elemento HTML, estamos 
misturando as camadas de comportamento com a camada de estruturagao e esta 
nao e uma pratica em conformidade com os Padroes Web. Em capitulos posteriores, 
iremos mostrar como fazer a separagao. 

No exemplo a seguir, vamos demonstrar o uso do metodo writeO sendo chamado 
a partir de um evento, apos a pagina ter sido carregada, para ilustrar o que dissemos 
no final do item [1.63]: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> 

<head> 

<title>Livro JavaScript do Maujor</title> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-l" /> 

</head> 

<body> 

<div id="tudo"> 

<hl>Capitulo l</hl> 

<p class="xpto" id="teste">document.writeO - Apos carregamento da pagina.</p> 

<p class="nav-arq" id="referencia">Arquivos exemplo: <a href="cl-onclick.html"> 

Slaquo; anterior</a> | <a href="cTonclick.html">proximo &raquo;</ax/p> 

<button type="button" 

onclick="document.write('Conteudo inserido apos carregamento da pagina')"> 

Inserir conteudo</button> 

</div> 

</body> 

</html> 

-te [cl -write-apos-carregamento.html] 

Note que ao clicar o botao para executar o metodo writeO todo o conteudo da 
pagina e substituido pelo conteudo inserido. 


1.7 Inserir JavaScript na HTML 

Para escrever codigo JavaScript, nao ha necessidade de instalar um software es¬ 
pecial. Escrevemos JavaScript com um editor de textos simples e visualizamos o 
resultado em um navegador. Arquivos escritos com o uso dessa linguagem devem 
ser gravados com a extensao . js e sao criados para serem executados dentro de um 
arquivo HTML. 
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Entao, scripts devem ser atrelados a documentos HTML. Existem tres maneiras 
de se inserir JavaScript em um documento HTML: 

■ Inline: inserir o script diretamente na segao body do documento. Trata-se de 
pratica nao recomendada de acordo com o principio da separagao das camadas 
de desenvolvimento. 

■ Incorporado: inserir o script na segao head do documento. 

■ Externo: escrever o script em um arquivo externo e inserir com um link na 
segao head do documento. 

Inserir script inline e uma pratica que pertence ao passado e deve ser evitada pelo 
desenvolvedor comprometido com os Padroes Web. Ao escrevermos scripts dentro 
da marcagao HTML, estaremos misturando as camadas de marcagao e comporta- 
mento, dificultando a manutengao e o entendimento dos codigos. 

Todos os scripts que mostramos anteriormente foram inseridos na marcagao HTML. 
Fizemos assim para facilitar a demonstragao das funcionalidades basicas da 
linguagem e o entendimento dos exemplos ilustrativos. Com a sequencia de estudos, 
iremos mostrar como fazer a separagao. 

Exemplo de script inline: 

cbutton type="button" onclick="alert(01a visitante!')"> 

Incorporar script ao documento pode ser uma pratica toleravel em situagoes 
muito particulares, como quando se trata de um so documento utilizando um 
script exclusivo. 

Exemplo de script incorporado: 

<head> 

<script type="text/javascript"> 

// script vai aqui 
</script> 

</head> 


As modernas praticas de desenvolvimento preconizam o uso de scripts externos 
a serem linkados ao documento. Cria-se um ou mais arquivos contendo os scripts e 
gravados com a extensao .js e usa-se o elemento scri pt na segao head do documento 
para linka-lo a pagina. Essa tecnica permite linkar o script a varias paginas do site, 
facilitando a manutengao. 
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Exemplo de script externo: 

<head> 

<script type="text/javascript" src="scripts/meu_script. js"x/script> 

</head> 


Note o uso do atributo src para indicar o caminho para o arquivo que content 
o script. 


1.8 Sistema lexico da JavaScript 

Entende-se por sistema lexico de uma linguagem o conjunto de palavras que com- 
poem a linguagem. Neste item, iremos estudar a estrutura lexica da JavaScript, bem 
como as regras gramaticais e sintaticas para escrever scripts. 


1.8.1 Tamanho de caixa 

A linguagem JavaScript e sensivel ao tamanho de caixa (case sensitive). Isso significa 
que nomes de variaveis, fungoes e demais identificadores sao diferenciados quando 
escritos com letras maiusculas ou minusculas. Por exemplo: as variaveis total, Total, 
toTal e TOTAL sao diferentes. O metodo writeO deve ser escrito em minuscula, pois 
escrever WriteO ou WRITEO causara um erro no script. 

Observe a marcagao HTML a seguir: 

cbutton type="button" onClick="alert('01a visitante!')"> 

Estamos atrelando o evento onclick, que, na sintaxe JavaScript, deve ser grafado 
em minusculas, a um botao HTML. Mas, na marcagao, a grafia e onClick e nao cau¬ 
sara erro no script. 

Na marcagao, estamos escrevendo HTML (onClick e um atributo HTML) e sa- 
bemos que HTML nao e sensivel ao tamanho da caixa, portanto e valida a grafia 
apresentada. Contudo, no script, deveremos usar onclick, caso contrario causaremos 
um erro. Isso pode parecer um pouco confuso, mas estamos escrevendo em lingua- 
gens diferentes, uma case insensitive - HTML - e outra case sensitive - JavaScript. 

Convent notar que se a marcagao for XHTML e nao HTML, entao o atributo oncl i ck 
tera que ser escrito tambem em minuscula, pois a linguagem XHTML, por ser compativel 
com XML, adota a sintaxe desta, na qual a marcagao deve ser escrita em minusculas. 
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Comentarios sao pequenos textos que o desenvolvedor insere ao longo do script 
com a finalidade de facilitar o entendimento e a manutengao do codigo. Alinguagem 
JavaScript admite tres tipos de marcadores para comentarios: 

■ Comentario em linha unica (variante 1): 

<script type="text/javascript"> 

// caixas de dialogo da JavaScript 
alert("Alo Mundo!"); // caixa de alerta 

confirm ("Voce tern certeza?"); // caixa de confirmagao 
prompt("Entre seu CPF"); // caixa de dados 

</script> 

■ Comentario em linha unica (variante 2): 

<script type="text/javascript"> 

<!— caixas de dialogo da JavaScript 
alert("A1o Mundo!"); <!— caixa de alerta 

confirm("Voce tern certeza?"); <!— caixa de confirmaqao 
prompt("Entre seu CPF"); <!— caixa de dados 

</script> 

■ Comentario em multiplas linhas: 

<script type="text/javascript"> 

/* Caixas de dialogo da JavaScript 

- caixa de alerta 

- caixa de confirmaqao 

- caixa de dados */ 

alert("Alo Mundo!"); 
confirm ("Voce tern certeza?"); 
prompt("Entre seu CPF"); 

</script> 

Use duas barras // para iniciar um comentario em linha unica ou coloque as 
multiplas linhas de comentario entre os sinais /* e V. 

Note que a variante 2, para marcar comentarios em uma linha, usa uma sintaxe 
semelhante a adotada para comentarios na marcagao HTML, com a diferenga de 
que nao e necessario o sinal de fechamento como mostrado a seguir: 

<!— Aqui comentario para a marcaqao HTML —> 

<!— Aqui comentario para JavaScript 

Essa variante normalmente nao e usada e consta aqui apenas como informagao. 
Use a variante 1 para comentarios em uma linha. 
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1.8.3 Dedaragoes 

Um script consiste em uma serie de instrugoes escritas segundo uma sintaxe propria 
e rigida. As instrugoes, escritas em uma sequencia logica, determinam a realizagao 
de tarefas com a finalidade de obter um resultado final. 

Cada uma das instrugoes de um script constitui uma declaragao independente e 
existem duas sintaxes para separar uma declaragao da outra. Separe-as com ponto- 
e-virgula ou coloque cada declaragao em uma linha separada. Observe a seguir: 

// declaragoes na mesma linha 
a = 5; b = 8; alert("Alo Mundo!"); 

// declaragoes em linhas separadas 
a = 5 
b = 8 

alert("Alo Mundo!") 

A sintaxe determina que o ponto-e-virgula seja obrigatorio para separar de¬ 
claragoes em uma mesma linha e facultativo para separar declaragoes em linhas 
diferentes, contudo e uma boa pratica usar ponto-e-virgula para separar declaragoes 
em linhas diferentes. 

// declaragoes em linhas separadas - recomendado usar ponto-e-virgula para separar 
a = 5; 
b = 8; 

alert("Alo Mundo!"); 


1.8.4 Espagos em branco e quebras de linha 

Quebras de linhas e espagos em branco, quando inseridos entre nomes de variaveis, 
nomes de fungoes, numeros e entidades similares da linguagem, sao ignorados na 
sintaxe JavaScript. Contudo, para strings e expressoes regulares, tais espagamentos 
sao considerados. Vejamos alguns exemplos que esclarecem o uso desses espagos: 

■ As duas sintaxes a seguir sao validas: 
a=27; e a = 27; 

alert("01a") e alert ( "Ola" ) 
function(){...} e function () {...} 

■ As sintaxes a seguir causam um erro no script: 

a = 2 7; // espago entre os algarismos de um numero nao e permitido 

document.write("<p> Eu sou 

uma string</p>") // quebra de linha em uma string 




Capitulo 1 ■ Introdugao a JavaScript 


45 


A sintaxe a seguir e valida: 
document.write("<p> Eu sou \ 

uma string</p>") // uso de \ para quebrar 1inha em string 

A sintaxe a seguir causa um erro no script: 
document.write \ 

("<p> Eu sou uma string</p>") // uso de \ para quebrar 1inha fora de string 

A sintaxe a seguir e valida: 
document.write 

("<p> Eu sou uma string</p>") // quebra de 1inha entre nome de fungoes 


1.8.5 Literals 

Na terminologia JavaScript, a palavra literal designa qualquer dado - valor fixo 
(nao variavel) - que se insere no script. Nos exemplos a seguir, os valores 45 e Alo 
Mundo! sao literals: 
a = 45; 

mensagem = "Alo Mundo!"; 

Existem seis tipos de dados literals conforme descritos a seguir: 

■ inteiros; 

■ decimals; 

■ booleanos; 

■ strings; 

■ arrays; 

■ objetos. 

Inteiros 

Os literals inteiros, na sintaxe JavaScript, sao os numeros inteiros escritos em base 
decimal (base 10), hexadecimal (base 16) ou octal (base 8). Abase octal esta em de- 
suso segundo a especificagao ECMA-262, embora seja valida na versao JavaScript 1.5. 

Abase 10 e o nosso conhecido sistema de numeragao e os numeros inteiros nela 
sao aqueles do conjunto Z da matematica que aprendemos no Ensino Medio: Z = 
{... -2, -1, 0,1, 2...} ou conjunto dos numeros inteiros positivos e negativos mais o 
numero zero. 
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A base hexadecimal utiliza 16 simbolos (base 16) para representar os numeros. 
Nela, os simbolos sao os dez numeros de 0 a 9 mais as seis primeiras letras do 
alfabeto A a F. Aqueles familiarizados com CSS certamente conhecem a declaragao 
de cores com o uso do sistema hexadecimal cuja sintaxe e mostrada a seguir: 
div { background: #FFD38A; } 

Outros exemplos de numero hexadecimal: F2, b43, EC65D1. Na sintaxe CSS, 
numeros hexadecimais deverao ser precedidos do sinal # (tralha). Na sintaxe 
JavaScript, numeros hexadecimais deverao ser precedidos de Ox (zero xis) e os 
exemplos anteriores, em sintaxe JavaScript, serao escritos: 0xF2,0xb43,0xEC65Dl. 

Exemplo de declaragoes usando o literal inteiro: 
c = 32; // base 10 

d = -119; // base 10 

e = 0xll0B6; // base hexadecimal 
f = Oxf56a2; // base hexadecimal 

Note que quando se trata de sintaxe na base hexadecimal, as letras A a F podem 
ser escritas tanto em maiusculas quanto em minusculas. 

Decimals 

Os literals decimals, na sintaxe JavaScript, sao os numeros constituidos por um 
numero inteiro e um numero fracionario. As casas decimals sao separadas por um 
ponto (.), como mostrado nos exemplos a seguir: 
a = 3.1416; 
b = -76.89; 
c = .33333; 

A sintaxe JavaScript admite a notagao cientifica (ou notagao exponencial) para 
escrever tanto literals inteiros como literals fracionarios. Notagao cientifica e uma 
maneira alternativa de representar numeros compostos por muitos algarismos e 
consiste em acrescentar a letra E (maiuscula) ou e (minuscula) a um numero para 
indicar expoentes de 10. Observe os exemplos a seguir; 
a = 3E5; // equivale a 3x10“ 5 = 300000 

b = -47.78965432E10; // equivale a -47.78965432x10**10 = 477896543200 
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Os literals booleanos, na sintaxe JavaScript, sao as palavras-chave true e false (mi- 
nusculas) destinadas a definir as condigoes de verdadeiro e falso, respectivamente, 
para uma variavel ou equivalente, como mostrado a seguir: 
a = true; 
b = false; 

Booleanos sao amplamente usados em estruturas de controle com a finalidade 
de testar a veracidade (ou validade) de uma determinada condigao, permitindo ao 
script tomar uma decisao baseado na condigao de falso ou verdadeiro da condigao. 
O exemplo a seguir esclarece em linguagem corrente o uso mais comum dos boo¬ 
leanos em programagao: 
a = 10; 

se a < 10 faga isto se nao faga aquilo; 

Quando transformamos a logica mostrada em sintaxe JavaScript, a condigao de 
teste da variavel a retorna true sempre que a for menor que 10 e false, caso contrario. 
Em capitulos posteriores, teremos oportunidade de usar com frequencia os boole¬ 
anos e eventuais duvidas sobre eles serao esclarecidas. 

Strings 

Os literals strings, na sintaxe JavaScript, sao os conjuntos de zero ou mais caracteres 
envolvidos por aspas duplas ("") ou aspas simples (''). Strings sao sequencias de 
caracteres. Observe os exemplos a seguir; 

nome = "Mauricio Samy Silva"; // string com aspas duplas 

outroNome = 'Pedro Nascimento Junior'; // string com aspas simples 

Podemos obter alguma formatagao basica ao escrevermos strings com o uso de 
caracteres especiais para a linguagem JavaScript. No exemplo a seguir: 
mensagem = "Obrigado pela visita.\nVolte em breve."; 

Inserimos o caractere \n na string. Ele faz com que haja o pulo de uma linha 
quando renderizada a string no navegador, resultando em algo como: 

Obrigado pela visita. 

Volte em breve. 

Na tabela 1.2, observe alguns dos caracteres especiais da linguagem e a sintaxe 
geral para caracteres Latin-1 e Unicode. 
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Tabela 1.2 - Tabela de caracteres especiais da JavaScript 


Caractere 

Descricao - Caractere Unicode hexadecimal 

\b 

Backspace - \u0008 

\f 

Form feed - \u000C 

\n 

Nova linha-\u000A 

\r 

Retorno do carro - \uOOOD 

\v 

Tabula^ao vertical - \u000B 

\t 

Tabulacao horizontal - \u0009 

V 

Apostrofo ou aspas simples - \u0027 

V 

Aspasduplas-\u0022 

w 

Barra invertida - \u005C 

\xxx 

Caractere Latin-1 expresso por digitos octais de 1 a 377 

\xXX 

Caractere Latin-1 expresso por dois digitos hexadecimais de 00 a FF 

\uXXXX 

Caractere Unicode expresso por quatro digitos hexadecimais 


Nas tres ultimas linhas da tabela 1.2, consta a sintaxe geral para a representagao 
de caracteres em strings nos sistemas octal e hexadecimal. O sistema octal esta em 
desuso e, assim, deve ser evitado. 

O sistema hexadecimal admite uma sintaxe para Latin-1 e uma sintaxe para 
Unicode. Para consultar as tabelas de caracteres, visite o site http://www.unicode.org/. 
La, voce encontrara toda a codificagao Unicode nos seus variados formatos. Para 
demonstrar o funcionamento da codificagao, mostramos a seguir tres caracteres e 
seus respectivos codigos e exemplos de uso na sintaxe JavaScript (Tabela 13). 


Tabela 1.3 - Caracteres Unicode na sintaxe JavaScript 


Caractere 

Octal 

Latin-1 hexadecimal 

Unicode hexadecimal 

© (Copyright) 

\251 

\xA9 

\u00A9 

• (Marca registrada) 

\256 

\xAE 

\u00AE 

11 (Paragrafo) 

\247 

\xA7 

\u00A7 


Observe no script a seguir que utilizamos as tres sintaxes mostradas na tabela 
13 para obter a renderizagao dos caracteres em uma caixa de alerta: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
chtml xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> 

<head> 

<title>Livro JavaScript do Maujor</title> 

cmeta http-equiv="Content-Type" content="text/html; charset=iso-8859-l" /> 
clink href="../main.css" reVstylesheet" type="text/css" /> 
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<script type="text/javascript"> 

var executar = function() { 
var caractere = "\ 

Octal:.\251, \256, \266 \n\ 

Latin 1 Hexadecimal.\xA9, \xAE, \xB6 \n\ 

Latin 1 Unicode:.\u00A9, \uOOAE, \u00B6" 

alert(caractere); 

} 

</script> 

</head> 

<body> 

<div id="tudo"> 

<hl>Capitulo l</hl> 

<p class="xpto" id="teste">Caracteres especiais.</p> 

<p class="nav-arq" id="referencia">Arquivos exemplo: 

<a href="cl-write-apos-carregauiento.htuil">&laquo; anterior</a> | 

<a href="cl-#.html">pr6ximo &raquo;</ax/p> 

<button type="button" onclick="executar()">Mostrar caracteres</button> 

</div> 

</body> 

</html> 

[cl -caracteres.html] 

No arquivo [cl-caracteres.html], no site do livro, ao clicar o botao para mostrar 
os caracteres, sera apresentada uma caixa de alerta conforme mostra a figura 1.6. 



Figura 1.6 - Renderizagao de caracteres. 

Na tabela 1.2, note que os caracteres ali mostrados tem seus equivalentes Unicode 
hexadecimal. Por exemplo, \u000A equivale a \n. 

Caractere de escape 

Na sintaxe para a codificagao de caracteres que acabamos de estudar, podemos 
notar a presenga de uma barra invertida “\” no inicio de cada caractere, tal como 
\n,\t, \251, \xAE, \uOOAE etc. 
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A barra invertida tem um emprego espedfico na escrita de strings da JavaScript. 
E conhecida como caractere de escape e usada para representar caracteres especiais 
como mostrado e tambem para escapar caracteres normalmente nao permitidos dentro 
de uma string. O caractere de escape, barra invertida, e ignorado dentro da string. 

Se escrevermos uma string contendo um caminho no diretorio C do HD como 
mostrado a seguir: 

alert("C:\\localhost\index.php"); 


Iremos obter um resultado conforme o mostrado na figura 1,7, o que obviamente 
nao e o que estamos esperando. 



Figura 1.7 - Caractere de escape. 


Isso porque o primeiro caractere de escape foi ignorado e escapou, o segundo 
que aparece depois de C: e o terceiro caractere de escape entre local host e index, 
php tambem foram ignorados. Para resolver isso, devemos escapar todas as barras 
invertidas que aparecem na string como mostrado a seguir: 
alert("C:\\\\localhost\\index.php"); 


Sabemos que strings devem ser marcadas com aspas duplas ("") ou aspas simples 
(' ')• Mas o que ocorre quando uma string contem um texto entre aspas ou apostrofo? 
Considere as strings a seguir: 

■ Os livros da editora O’Reilly sao muito bons. 

■ Mac’Neil disse: “Vim para Hear”. 

As seguintes sintaxes sao validas para escrever as strings mostradas: 

"Os livros da editora O'Reilly sao muito bons." // aspas duplas fora e simples dentro 
'Os livros da editora O'Reilly sao muito bons.' // aspas simples fora e simples escapadas dentro 
'Mac\'Neil disse: "Vim para ficar"." // aspas simples fora, duplas e simples escapadas dentro 
"Mac'Neil disse: \"Vim para ficar\"." // aspas duplas fora, duplas escapadas e simples dentro 


Como regra geral, aspas que envolvem a string e estao contidas na string devem 
ser de natureza (simples e dupla) oposta. Se forem de mesma natureza, deveremos 
usar o caractere de escape nas internas. 




Capi'tulo 1 ■ lntrodu$ao a JavaScript 51 

Arrays 

Os literals arrays, na sintaxe JavaScript, sao os conjuntos de zero ou mais valores, 
separados por virgula e envolvidos por colchetes ([ ]). Os valores contidos em um 
array recebem um indice sequencial comegando com zero. A sintaxe para criar um 
array literal e mostrada a seguir: 

frutas = ["laranja", "pera", "goiaba", "morango"]; 


Para recuperarmos os valores de um array, usamos a sintaxe composta pelo nome 
do array seguida de um indice, entre colchetes, como mostra o exemplo a seguir: 

frutas[0] contem o valor laranja. 
frutas [3] contem o valor morango. 

Os valores do array que mostramos sao strings e devem ser escritos entre aspas 
como estudamos anteriormente. Um array pode conter qualquer tipo de dado da 
JavaScript, incluindo expressoes, objetos e outras arrays. Por exemplo: 

ArrayMisto = ["laranja", 34, "casa", true, [1,3,5], a+b]; 

Veja no site do livro o exemplo a seguir, que mostra a extragao de dados de um 
array: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
chtml xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> 

<head> 

<title>Livro JavaScript do Maujor</title> 

cmeta http-equiv="Content-Type" content="text/html; charset=iso-8859-l" /> 

<link href="../main.css" reVstylesheet" type="text/css" /> 

<script type="text/javascript"> 
a = 4; b = 12; 

ArrayMisto = [ "laranja", 34, "casa", true, [1,3,5], a+b ]; 
var executar = functionO { 
alert(ArrayMisto[0]); 
alert(ArrayMisto[l]); 
alert(ArrayMisto[3]); 
ale rt(ArrayMisto[4][1]); 
alert(ArrayMisto[5]); 

} 

</script> 

</head> 

<body> 

<div id="tudo"> 
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<hl>Capitulo l</hl> 

<p class="xpto" id="teste">Literais arrays.</p> 

<p class="nav-arq" id="referencia">Arquivos exemplo: <a href="cl-caracteres.html">&laquo; 
anterior</a> | <a href="cl-objetos.html">pr6ximo &raquo;</ax/p> 

<button type="button" onclick="executar()">Mostrar array</button> 

</div> 

</body> 

</html> 

9 [cl-arrays.html] 


Objetos 

Os literals objetos, na sintaxe JavaScript, sao os conjuntos de pares nome/valor 
separados por virgula e envolvidos por chaves ({ }). O par nome/valor pode ser 
uma propriedade do objeto e seu respectivo valor, um metodo do objeto e seu valor 
(normalmente uma fungao) ou mesmo outro objeto. A sintaxe para criar um objeto 
literal e mostrada a seguir: 

Carro = 

{ 

marca: "Renault", 
modelo: "Logan", 
ipva: "valor('rbl5')", 
dimensoes: 

{ 

c: "4.250mm", 

1: "1.735mm", 
h: "1.525mm" 


// propriedade/valor 
// propriedade/valor 
// propriedade/metodo 
// propriedade/objeto 


}; 

O objeto Carro mostrado possui as propriedades marca, modelo e dimensoes. A pro¬ 
priedade dimensoes e um objeto com as propriedades c, 1 e h que expressam o com- 
primento, a largura e a altura do carro. O objeto possui ainda um metodo de nome 
ipva, que e uma fungao denominada valorO, que admite um argumento de calculo 
rbl5 destinado a calcular o valor do IPVA. 

Para extrair os dados de um objeto, usa-se a sintaxe propriedade. valor. Observe o 
exemplo a seguir disponivel para consulta no site do livro: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> 

<head> 
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<title>Livro JavaScript do Maujor</title> 

cmeta http-equiv="Content-Type" content="text/html; charset=iso-8859-l" /> 
clink href="../main.css" reVstylesheet" type="text/css" /> 
cscript type="text/javascript"> 

Carro = 

{ 

marca: "Renault", 
modelo: "Logan", 
ipva: "valor('rbl5’)", 
dimensoes: 

{ 

c: "4.250mm", 

1: "1.735mm", 
h:"1.525mm" 

} 

} 

marca = Carro.marca; 
modelo = Carro.modelo; 
comprimento = Carro.dimensoes.c; 

executar = functionO { 
alert(marca); 
alert(modelo); 
alert(comprimento); 

} 

</script> 

</head> 

<body> 

cdiv id="tudo"> 

<hl>Capitulo l</hl> 

<p class="xpto" id="teste">Literais objetos.</p> 

<p clas5="nav-arq" id="referencia">Arquivos exemplo: <a href="cl-caracteres.html">&laquo; 

anterior</a> | <a href="cl-#.html">pr6ximo &raquo;</ax/p> 

cbutton type="button" ondick="executar()">Mostrar propriedades</button> 

</div> 

</body> 

</html> 

♦ [cl -objetos.html] 

1.8.6 Se^aoCDATA 

Segoes CDATA se destinam a esconder do parseador XML blocos de texto que 
contenham caracteres de dados ou marcagao. 
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ParseadorXML e um processador nativo do navegador (Internet Explorer nao tem) 
cuja finalidade e transformar uma marcagao XML em um objeto DOM. 


Na sintaxe XML caracteres tais como &, " e ' devem ser codificados para &amp; 
&quot; e &apos; respectivamente. O mesmo ocorre com o caractere < quando usado 
de outra maneira que nao para indicar abertura de tag, caso em que devera ser 
codificado para Alt;. 

Considere que a marcagao a seguir esta inserida em um documento XML ou 
XHTML. 

<p>0 sinal matematico < indica menor que</p> 

Essa marcagao e ilegal segundo a sintaxe XML, pois o parseador ao encontrar 
o caractere < inserido no meio do paragrafo o interpretara como uma abertura de 
tag e nao encontrando o respectivo caractere de fechamento da tag gerara um erro. 

A solugao e usar codificagao como mostrado a seguir. 

<p>0 sinal matematico &lt; indica menor que</p> 

Scripts JavaScript podem corner, e normalmente content, caracteres ilegais se¬ 
gundo a sintaxe XML. Se tais scripts forem inseridos diretamente no documento 
(nao linkados), serao parseados e gerarao erro XML. Observe a seguir. 

<script type="text/javascript"> 
if (a<8) { 

alert("a e menor do que 8"); 

} 

</script> 

A presenga do sinal <, menor que, no script causa um erro XML. Se o documento 
for servido com DOCTYPE XML simplesmente ele nao funcionara. Se for servido 
com DOCTYPE XHTML ele nao sera validado. 

O uso de segoes CDATA em JavaScript resolvem o problema tornando o codigo 
invisivel para o parser XML e portanto valido. Observe a seguir um exemplo de- 
monstrando a sintaxe e uso de segoes CDATA em JavaScript. 

<script type="text/javascript"> 

// <![CDATA[ 
if (a < 8) { 

alert("a e menor do que 8"); 

} 

// ]]> 

</script> 
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Se o documento usar um DOCTYPE para HTML nao e necessario o uso de 
segoes CDATA pelo fato de que HTML nao segue a sintaxe XML. 

Por mais estranho que possa parecer a grafia para a segao CDATA deve ser em 
maiuscula embora a sintaxe XML imponha minusculas. 


1.9 Variaveis 

Variavel e um nome qualquer ao qual se atribui um valor ou dado. Uma variavel pode 
conter uma string, um numero inteiro, um numero fracionario, um array, um boole- 
ano, uma fungao, um objeto etc. Variaveis sao tambem chamadas de identificadores. 

O nome da variavel e de livre escolha do programador, ressalvadas as seguintes 
restrigoes sintaticas: o nome da variavel deve comegar com um dos tres seguintes 
caracteres: uma letra, um caractere underscore (_) ou um caractere cifrao ($). Os 
caracteres que se seguem podem ser letras maiusculas ou minusculas (A-Z ou a-z), 
numeros (0-9), underscores (_) ou caractere cifrao ($). 

E interessante nao utilizar o caractere cifrao ($) para nao haver confusao com 
codigos especificos de bibliotecas JavaScript, pois e amplamente empregado na 
sintaxes desses frameworks. 

A partir da versao JavaScript 1.5, permite-se o uso de letras acentuadas, digitos, 
caracteres escapados e demais caracteres Unicode em nome de variaveis. 

Exemplos de nomes de variaveis: 
a 

_xpto 

minha_variavel 

minhaVariavel 

minha-variavel 

cd456 

Embora a sintaxe para escrever variaveis permita uma infinidade de combinagoes, 
e o programador e livre para escolher aquela que bem entender, algumas regras 
praticas consagradas pelo uso devem ser seguidas nao em carater obrigatorio, mas 
como uma tecnica de boas praticas de programagao. Procure adotar as seguintes 
regras ao escolher nomes para variaveis: 

■ Escolha nomes que transmitam uma dica do conteudo da variavel. Por exemplo: 
qdeLivros para uma variavel destinada a armazenar uma quantidade de livros. 
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Evite nomes de variaveis como a, f34, vari avel ParaArmazenarUmObjeto, pois sao muito 
sucintas ou verbosas. Use as letras i, j, k,... para nomear variaveis contadoras. 

Variaveis nomeadas com um nome composto podem ser escritas de varias 
formas. Por exemplo: nomevendedor, nome-vendedor, nome_vendedor e nomeVendedor sao 
todos nomes validos e podemos escolher qualquer um deles. As formas mais 
usadas sao nome_vendedor e nomevendedor, e essa ultima usa a grafia conhecida 
como CamelCase. O importante e que o desenvolvedor escolha uma das 
formas mostradas ou mesmo outra forma valida por ele inventada e adote-a 
para desenvolver todos os seus projetos, mantendo a consistencia de escrita. 

Ha, ainda, restrigao final para escolher nomes de variaveis. Algumas palavras 
fazem parte da sintaxe da linguagem JavaScript e nao podem ser usadas para 
nomear variaveis. Tais palavras estao agrupadas em tres categorias distintas, a 
saber: palavras proprias e internas da JavaScript (Tabela 1.4), palavras reservadas 
pelas especificagoes ECMA-262 para uso em futuras versoes da JavaScript (Tabe¬ 
la 1.5) e palavras que fazem parte da implementagao JavaScript nos dispositivos 
que hospedam a linguagem, como um navegador, por exemplo (Tabela 1.6). 


Tabela 1.4 - Palavras-chave JavaScript 


break 

else 

new 

var 

case 

finally 

return 

void 

catch 

for 

switch 

while 

continue 

function 

this 

with 

default 

if 

throw 


delete 

in 

try 


do 

instanceof 

typeof 



Tabela 1.5 - Palavras reservadas pela especificagdo ECMA-262 


abstract 

enum 

int 

short 

boolean 

export 

interface 

static 

byte 

extends 

long 

super 

char 

final 

native 

synchronized 

class 

float 

package 

throws 

const 

goto 

private 

transient 

debugger 

implements 

protected 

volatile 

double 

import 

public 

public 
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Tabela 1.6 - Palavras reservadas dos dispositivos de hospedagem 


alert 

eval 

location 

open 

array 

focus 

math 

outerHeight 

blur 

function 

name 

parent 

boolean 

history 

navigator 

parseFloat 

date 

image 

number 

regExp 

document 

isNaN 

object 

status 

escape 

length 

onLoad 

string 



Lembre-se de que JavaScript e sensivel ao tamanho da caixa (case sensitive). Assim, 
as variaveis nomevendedor, nome-vendedor, nome_vendedor e nomeVendedor 
sao diferentes. 


1.9.1 Dedarar variaveis 

JavaScript e uma linguagem de programagao nao tipificada, pois, ao contrario da 
maioria das linguagens de programagao, as variaveis da JavaScript podem conter 
qualquer tipo de dado. Observe o exemplo a seguir: 


minhaVariavel = "Alo Mundo"; 
// aqui script 
minhaVariavel = 235; 

// aqui mais script 


Note que a variavel mi nhaVari avel comega com um valor do tipo string e, em um 
ponto posterior no script, a mesma variavel assume um valor tipo numerico. Tal 
fato e legal em JavaScript, pois a linguagem reconhece o tipo de dado quando a 
variavel e declarada. Na maioria das linguagens de programagao, isso e ilegal, pois 
uma determinada variavel devera ser declarada para um tipo de dado e conter 
sempre esse tipo. 

Um conceito importante ao declararmos uma variavel e o chamado escopo da 
variavel, que e o ambiente ou, mais precisamente, o trecho ou regiao do script no 
qual a variavel assume o valor que foi para ela declarado. 

Uma variavel pertence ao escopo global e denomina-se variavel global quando 
seu valor e reconhecido em qualquer trecho do script. Por outro lado, diz-se que 
uma variavel e local e pertence ao escopo local quando seu valor e reconhecido 
somente no trecho do script no qual ela foi declarada. 
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Para declarar uma variavel pertencente ao escopo local, usa-se a palavra-chave 
var, que e propria da sintaxe JavaScript. Declarar uma variavel sem uso da palavra- 
chave var implica que a variavel pertenga ao escopo global. Observe a seguir: 

var a = 30; // a variavel a pertence ao escopo local 

b = 25; //a variavel b pertence ao escopo global 

Vamos fixar a nogao de escopo de uma variavel com o uso do script mostrado 
a seguir. Caso voce nao esteja familiarizado com o funcionamento de fungoes na 
JavaScript, nao se preocupe em entende-lo agora. No capitulo 6, trataremos de 
fungoes com mais detalhes. 

<script type="text/javascript"> 

a = 10; 

funcaoUm = functionO { 

var a = 20; 

alert(a); // alerta o valor 20 

1 ; 

funcaoUmO; // executa a funcaoUm 

funcaoDois = functionO { 

alert(a); // alerta o valor 10 

1 ; 

funcaoDoisO; // executa a funcaoDois 

// mais script ... 

alert(a); // alerta o valor 10 

</script> 

Podemos identificar tres regioes distintas no script mostrado. A regiao da funcaoUm, 
a regiao da funcaoDois e a regiao compreendendo todo o script (dentro e fora das 
duas fungoes). 

Para a funcaoUm, o valor da variavel a e 20, pois a declaramos no corpo da fungao 
com o uso da palavra-chave var. Trata-se de uma variavel local cujo valor vale so- 
mente para a fungao. 

Para a funcaoDois, nao foi declarado um valor local para a variavel a, portanto a 
fungao procura o valor da variavel no escopo global e encontra o valor 10. Se nao 
existisse uma variavel a = 10 no escopo global, o valor retornado para ela seria con- 
siderado indefinido (undefined), causando um erro no script. 

Alem das duas fungoes, o ultimo alerta usa a variavel do escopo global com 
valor 10. 
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Vamos introduzir uma modificagao no exemplo anterior com a finalidade de 
esclarecer melhor o escopo de uma variavel. A modificagao consiste em declarar um 
novo valor para a variavel a dentro da funcaoDois, mas sem uso da palavra-chave var, 
ou seja, trata-se de uma variavel do escopo global definida no corpo de uma fungao. 
<script type="text/javascript"> 
a = 10; 

funcaoUm = functionO { 
var a = 20; 

alert(a); // alerta o valor 20 

}; 

funcaoUmO; // executa a funcaoUm 

funcaoDois = functionO { 

a = 40; 

alert(a); // alerta o valor 40 

}; 

funcaoDoisO; // executa a funcaoDois 

// mais script ... 

alert(a); // alerta o valor 40 

</script> 

A declaragao do valor global - 40 - para a variavel a dentro da funcaoDoi s sobres- 
creve o valor global -10 - declarado anteriormente e, em consequencia, neste caso, 
o alerta seguinte e o ultimo alerta retornarao 40 e nao mais 10. 

A seguir, mais alguns exemplos esclarecendo o escopo de variaveis. Estude-os 
com atengao para entende-los, pois os conceitos sao os mesmos mostrados nos 
exemplos anteriores. 

■ Exemplo 1: 

<script type="text/javascript"> 
funcaoUm = functionO { 
a = 20; 

alert(a); // alerta o valor 20 

}; 

funcaoUmO; // executa a funcaoUm 

alert(a); // alerta o valor 20 

</script> 

■ Exemplo 2; 

<script type="text/javascript"> 
funcaoUm = functionO { 
var a = 20; 
alert(a); 


// alerta o valor 20 
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}; 

funcaoUmO; // executa a funcaoUm 

alert(a); 11 retorna undifined 

</script> 

■ Exemplo 3: 

<script type="text/javascript"> 
funcaoUm = function() { 
var a = 20; 

alert(a); // alerta o valor 20 

function funcaoAninhadaO { 

var a = 40; // alerta o valor 40 

alert (a); 

}; 

funcaoAninhadaO; // executa a funcaoAninhada 

}; 

funcaoUmO; // executa a funcaoUm 

</script> 

■ Exemplo 4: 

<script type="text/javascript"> 
a = 40; 

funcaoUm = function() { 

alert(a); // alerta undifined 

var a = 10; 

alert(a); // alerta o valor 10 

}; 

funcaoUmO; // executa a funcaoUm 

</script> 

O exemplo 4 expressa um conceito de escopo de variaveis que diz o seguinte: 
uma variavel local cria, na regiao onde for declarada, um contexto para sua valida- 
de, independentemente de onde estiver posicionada na regiao. No exemplo 4, era 
de se esperar que o primeiro alerta resultasse no valor 40, pois existe uma variavel 
a do escopo global definida anteriormente com esse valor. Contudo, como existe 
uma variavel a local de valor 10, definida dentro da fungao, ela e valida dentro de 
toda a fungao e o primeiro alerta por estar antes da declaragao da variavel local 
“sabe” que foi criado um contexto de validade para a, mas nao conhece seu valor, 
retornando indefinido. 

Para evitar resultados inesperados como o mostrado no exemplo 4, e importante 
declarar as variaveis logo no inicio da fungao. 
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Em um script muito extenso desenvolvido individualmente ou em equipe, e 
muito dificil manter o controle sobre o nome das variaveis dele e a possibilidade 
de se escolher um mesmo nome para uma variavel em diferentes locais dele deve 
ser considerada. Isso podera ocasionar sobrescrigao de variaveis anteriormente de- 
claradas, causando resultados inesperados e, dependendo do contexto, dificeis de 
serem detectados pelo desenvolvedor. E interessante usar sempre a palavra-chave 
var ao se declarar variaveis, tornando-as todas variaveis locais. 

Tal pratica nao e mandatoria, mas sim altamente recomendada, ressalvados os 
casos em que declarar variaveis globais tenha sido uma decisao fundamentada em 
propositos consistentes para o script e que garanta o pleno controle de tais variaveis 
ao longo de todo o processo de desenvolvimento. 

Sintaxe para declarar variaveis 

E importante declarar as variaveis na primeira linha de codigo da regiao para a qual 
ela sera valida, mas nao ha uma sintaxe rigida para a forma de declara-las. Observe 
nos exemplos a seguir tres formas diferentes de se declarar variaveis. 

var a = 40; var b = 60; var c = "Alo Mundo!"; 

var a = 40; 

var b = 60; 

var c = "Alo Mundo!"; 

var a = 40, b = 60, c = "Alo Mundo!"; 


A terceira forma e a mais simplificada e tern sido preferida pela maioria dos de- 
senvolvedores, contudo voce e livre para escolher a que lhe parega mais apropriada 
e seguir com ela por todos os scripts que venha a desenvolver. Excluam-se os casos 
especificos nos quais talvez fosse melhor escolher outra forma com a finalidade, 
por exemplo, de tornar o codigo mais claro ou legfvel. 

Note que na forma mais simplificada a palavra-chave var aparece somente na 
declaragao da primeira variavel e as declaragoes seguintes sao separadas por virgu- 
la. Nessa sintaxe, a palavra-chave var e valida para todas as variaveis da lista e, em 
consequencia, todas elas sao variaveis locais. 
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null, undefined, NaN, Infinity 

Faremos uma introdugao sumaria ao significado de um valor e tres propriedades da 
linguagem JavaScript com a finalidade de fornecer uma base minima para compreen- 
der alguns exemplos que desenvolveremos na sequencia deste capitulo e no capitulo 
2. Posteriormente, detalharemos com mais precisao os conceitos estudados a seguir. 

Na sintaxe JavaScript, null e uma palavra-chave que indica ausencia de valor, 
ou um objeto sem um valor que o represente. Se uma variavel e declarada null, nao 
existe um objeto, um array, uma string, um literal ou qualquer outro valor a ela 
associado. No exemplo a seguir, a variavel a foi declarada null: 

var a = null; 

Para representar um valor indefinido, a sintaxe JavaScript usa uma propriedade 
do objeto global denominada undefined (indefinido). Diz-se que uma variavel assume 
o valor undefined quando e declarada e nao inicializada, ou seja, nao se atribui um 
valor a ela. No exemplo a seguir, a variavel a e indefinida: 

var a; 

Para representar um valor que nao seja um numero, a sintaxe JavaScript usa uma 
propriedade do objeto global denominada NaN. No exemplo a seguir, a variavel a e 
representada por NaN: 

var a = 3 * "Ola"; 

Para representar um valor infinito positivo, a sintaxe JavaScript usa uma pro¬ 
priedade do objeto global denominada Infinity. No exemplo a seguir, a variavel a 
tern valor infinito. A faixa de numeros manipulaveis pelo interpretador JavaScript 
esta compreendida entre: 

-1.797693134862 3157e+308 e 1.797693134862 3157e+308 

Os numeros mostrados estao escritos em notagao cientifica. A notagao cientifica 
e da forma ae+b e ae-b e e usada para representar numeros muito grandes ou muito 
pequenos. Observe um exemplo mostrando a equivalence de numeros na notagao 
decimal e cientifica: 

3.2e+4 = 3.2x104 = 32000 

347e-5 = 347x10-5 = 0,00345 

Valores abaixo desses numeros sao considerados -Infinity e acima, +Infinity. 
Estudaremos com mais detalhes essas propriedades do objeto Number no capitulo 9. 

var a = 12 + Infinity; 
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1.10 Variaveis e propriedades dos objetos 

Fizemos uma introdugao a sintaxe JavaScript para objetos no item [1.8.5], Vimos 
que propriedades de um objeto nada mais sao do que valores de uma variavel do 
objeto. Nesse sentido, nao ha diferengas entre variaveis e propriedades dos objetos. 
Ambas sao conceitualmente identicas. O item a seguir esclarece melhor esse conceito. 


1.11 Objeto global 

Um ambiente de hospedagem da JavaScript possui, nativamente instalado, um 
interpretador da linguagem. Toda vez que se inicia um desses ambientes, ele cria 
um objeto global contendo todas as propriedades e metodos da linguagem e do 
ambiente de hospedagem. 

Para esclarecer e identificar o objeto global, tomemos como exemplo um nave- 
gador web que e um ambiente de hospedagem para JavaScript. 

Quando abrimos o navegador, cria-se um objeto global que, na sintaxe JavaScript, 
se denomina window. Esse objeto contem todas as propriedades e metodos da lin¬ 
guagem e do respectivo navegador. Os metodos para criar caixas de dialogo que 
estudamos anteriormente sao do objeto Window e, assim sendo, as sintaxes a seguir 
sao perfeitamente validas: 
window.alert("01 a Mundo"); 
window, confirm ("Voce tem certeza?"); 
window.promptC'Informe seu nome", " "); 

Pode-se fazer referenda ao objeto global window com o uso de uma palavra-chave 
propria da linguagem JavaScript denominada this. Assim, as sintaxes a seguir sao 
equivalentes as mostradas anteriormente e perfeitamente validas: 
this.alert("01a Mundo"); 
this.confirm("Voce tem certeza?"); 
this.promptC'Informe seu nome", " "); 

A palavra-chave this refere-se ao objeto Window quando usada fora do corpo de 
uma fungao. Quando utilizada no corpo de uma fungao, refere-se a um objeto que 
nao window. E um objeto proprio da fungao denominado genericamente de call object. 
Trataremos desse objeto em capitulos posteriores deste livro. 
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Quando declaramos, em nossos scripts, variaveis globais, estas sao automatica- 
mente declaradas como propriedades do objeto global wi ndow. Assim, de acordo com 
os conceitos ja estudados, as seguintes sintaxes sao validas: 
a = 50; 

alert (window, a); // alerta 50 

funcaoUm = functionO { 
var b = 30; 

}; 

funcaoUmO; 

alert(window.b); // alerta undefined, pois b e local e nao global 

Os exemplos anteriores podem ser escritos com a palavra-chave this como mos- 
trado a seguir: 
a = 50; 

alert(this.a); // alerta 50 

funcaoUm = functionO { 
var b = 30; 

}; 

funcaoUmO; 

alert(this.b); // alerta undefined, pois b e local e nao global 



